<script setup>

import {getTemplateBasicInfo, updateTemplateBasicInfo} from "@/api/document/fileTemplate.js";
import {useRoute} from "vue-router";
import {pageofficeOpenFile} from "@/plugins/pageoffice/pageoffice-common.js";
import {getContractOperateMenu} from "@/utils/menu.js";

const { proxy } = getCurrentInstance()
const route = useRoute()
const templateId = route.params && route.params.templateId
const isCanEdit = ref(JSON.parse(route.query.isCanEdit))
const opMenuEnum = getContractOperateMenu()
const data = reactive({
  templateForm: {},
  rules: {
    name: [{ required: true,  message: "模板名不能为空", trigger: "blur" }, { max: 100, message: "模板名称不能超过 100 个字符", trigger: "blur" }],
    memo: [{ max: 255, message: "备注内容长度不能超过 255 个字符", trigger: "blur" }]
  }
})
const {templateForm, rules} = toRefs(data)

onMounted(() => {
  getTemplateInfo()
})

function getTemplateInfo() {
  if (templateId) {
    getTemplateBasicInfo(templateId).then(template => {
      templateForm.value = template
    })
  }
}

function backList() {
  const obj = { path: "/document/" + opMenuEnum.fileTemplate, query: { t: Date.now() } }
  proxy.$tab.closeOpenPage(obj)
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["templateRef"].validate(valid => {
    if (valid) {
      updateTemplateBasicInfo(templateForm.value).then(() => {
        getTemplateInfo(templateId)
        proxy.$modal.msgSuccess("保存成功")
      })
    }
  })
}

function openApprovalFile() {
  pageofficeOpenFile('/document/fileTemplate/openApprovalFile/' + templateId, templateId)
}

function openMainFile() {
  pageofficeOpenFile('/document/fileTemplate/openMainFile/' + templateId, templateId)
}
</script>

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--模板数据-->
      <el-col :span="24" :xs="24">
        <span style="vertical-align: middle; font-size: 14px; " class="mb10">
                       【状态：{{ templateForm.status }}】【新建时间：{{
            templateForm.createTime
          }}】【修改时间：{{ templateForm.createTime }}】
        </span>
        <div class="el-table el-table--enable-row-hover el-table--medium mt20">
          <el-form :model="templateForm" :rules="rules" ref="templateRef" label-width="80px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="模板名称" prop="name">
                  <el-input v-model="templateForm.name" placeholder="请输入模板名称" maxlength="100" :disabled="!isCanEdit"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注信息">
                  <el-input v-model="templateForm.memo" type="textarea" placeholder="请输入备注下信息" maxlength="255" :disabled="!isCanEdit"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item>
                  <el-button type="primary" @click="submitForm()" v-if="isCanEdit">
                    保存
                  </el-button>
                  <el-button type="primary" @click="openApprovalFile()">
                    打开呈批表
                  </el-button>
                  <el-button type="primary" @click="openMainFile()">
                    打开正文
                  </el-button>
                  <el-button @click="backList()">返回</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-input.is-disabled .el-input__wrapper) {
  .el-input__inner {
    -webkit-text-fill-color: #606266;
  }
}
</style>

